<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: xcl
 * @LastEditTime: 2022-09-13 14:22:16
 * @Description: 首页
-->

<template>
  <div>
    <cesium-map :type="2"></cesium-map>
    <transition name="el-zoom-in-top">
      <el-card v-show="show" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ house[num].title }}</span>
        </div>
        <div class="text item">当前楼层类型: {{ house[num].type }}</div>
        <br />
        <div class="text item">
          当前楼层人员数量: {{ house[num].num_people }}人
        </div>
      </el-card>
    </transition>
  </div>
</template>

<script>
import CesiumMap from "@/components/map/CesiumMap.vue";
export default {
  name: "Home",
  components: { "cesium-map": CesiumMap },
  data() {
    return {
      distance: 5,

      house: [
        {
          title: "一层",
          num_people: "23",
          type: "公共区域",
        },
        {
          title: "二层",
          num_people: "11",
          type: "图书室",
        },
        {
          title: "三层",
          num_people: "3",
          type: "会议室",
        },
      ],

      num: 0,

      show: false,

      polygon: [
        {
          lng: 116.39131712256575,
          lat: 39.906801656268954,
          alt: -0.020616794496735785,
        },
        {
          lng: 116.39131596359348,
          lat: 39.90708176355381,
          alt: 0.05346177728189938,
        },
        {
          lng: 116.39154767282791,
          lat: 39.90708203923232,
          alt: -0.017183368432186374,
        },
        {
          lng: 116.39155284725508,
          lat: 39.907188468291466,
          alt: -0.0169496688102106,
        },
        {
          lng: 116.39111927546541,
          lat: 39.90718908677937,
          alt: -0.021281730439899067,
        },
        {
          lng: 116.39112033058919,
          lat: 39.906692907024706,
          alt: -0.016260006921727903,
        },
        {
          lng: 116.39189117418276,
          lat: 39.90669824880458,
          alt: 0.45078829511255064,
        },
        {
          lng: 116.39189154727785,
          lat: 39.90679923013294,
          alt: 0.33363336574804964,
        },
        {
          lng: 116.39132710544345,
          lat: 39.906802059934236,
          alt: -0.019459822771336854,
        },
      ],
    };
  },
  computed: {},
  props: {},
  watch: {},
  created() {},
  mounted() {
    this.addTileset();
    this.getFcInfo();
  },
  methods: {
    // 添加建筑
    addTileset() {
      const viewer = window.vmCesiumViewer;

      let tileset = new Cesium.Cesium3DTileset({
        url: "//lab.earthsdk.com/model/d16c1ce0ac2d11e99dbd8fd044883638/tileset.json",

        modelMatrix: Cesium.Matrix4.fromArray([
          1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
        ]),
        show: true,
      });
      viewer.scene.primitives.add(tileset);

      viewer.flyTo(tileset);
    },
    // 鼠标经过建筑物，显示信息
    getFcInfo() {
      const viewer = window.vmCesiumViewer;
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      let box, baseHeight;
      let self = this;
      handler.setInputAction(function (move) {
        var pick =
          // viewer.scene.pick(MOVE.position);
          viewer.scene.pick(move.endPosition);
        // console.log(viewer.scene.pickPosition(move.endPosition));
        if (pick) {
          //   console.log(pick);
          //     console.log(
          //       self.Cartesian3ToWGS84(viewer.scene.pickPosition(click.position))
          //     );
          let new_baseHeight =
            parseInt(
              self.Cartesian3ToWGS84(
                viewer.scene.pickPosition(move.endPosition)
              ).alt / 4
            ) *
              4 +
            -8;
          if (baseHeight != new_baseHeight) {
            self.show = true;
            self.num = parseInt(
              self.Cartesian3ToWGS84(
                viewer.scene.pickPosition(move.endPosition)
              ).alt / 4
            );
            if (self.num > 2) {
              self.show = false;
              self.num = 2;
            }
            baseHeight = new_baseHeight;
            box = self.addBoxClassificationPrimitive(
              80.0,
              80.0,
              4.0,
              baseHeight,
              box
            );
          }
        } else {
          if (box) {
            box.destroy();
            baseHeight = null;
            self.show = false;
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      //   handler.setInputAction(function (CLICK) {
      //     console.log(
      //       self.Cartesian3ToWGS84(viewer.scene.pickPosition(CLICK.position))
      //     );
      //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    // 区域立方体单体化
    addBoxClassificationPrimitive(
      length = 80.0,
      width = 80.0,
      height = 4.0,
      baseHeight = 0,
      box
      //楼的长宽高和基地高
    ) {
      if (box) box.destroy();
      const viewer = window.vmCesiumViewer;
      let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(
          116.39146722726551,
          39.906950862690075,
          9.5
        )
      );
      let hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(
        new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(-6), 0.0, 0.0)
      );
      let hpr = Cesium.Matrix4.fromRotationTranslation(
        hprRotation,
        new Cesium.Cartesian3(0.0, 0.0, baseHeight) //楼层高度上的偏移
      );
      Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);
      return viewer.scene.primitives.add(
        new Cesium.ClassificationPrimitive({
          geometryInstances: new Cesium.GeometryInstance({
            geometry: Cesium.BoxGeometry.fromDimensions({
              vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
              dimensions: new Cesium.Cartesian3(length, width, height),
            }),
            modelMatrix: modelMatrix,
            attributes: {
              color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                new Cesium.Color(1.0, 0.0, 0.0, 0.8) //设置高亮颜色
              ),
              show: new Cesium.ShowGeometryInstanceAttribute(true), //设置初始化后是否显示
            },
            id: "BoxClassificationPrimitive1",
          }),
          classificationType: Cesium.ClassificationType.CESIUM_3D_TILE, //只绘制在3dtiles上
        })
      );
    },
    // 区域多边形单体化
    addPolygonClassificationPrimitive() {
      let aa = [];
      this.polygon.forEach((e) => aa.push(e.lng, e.lat, 0));
      const viewer = window.vmCesiumViewer;
      viewer.entities.add({
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(
            Cesium.Cartesian3.fromDegreesArrayHeights(aa)
          ),
          classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
          material: Cesium.Color.RED.withAlpha(0.5),
          extrudedHeight: 8, // 顶部离地距离
          height: 4, // 离地距离
        },
      });
    },
    /**
     * 笛卡尔坐标转WGS84
     * @param Cartesian3 单个点或点数组
     */
    Cartesian3ToWGS84(Cartesian3) {
      if (!Cartesian3 || !Cartesian3.x) {
        throw "Error in parameters";
      }
      let _cartesian3 = new Cesium.Cartesian3(
        Cartesian3.x,
        Cartesian3.y,
        Cartesian3.z
      );
      let _cartographic = Cesium.Cartographic.fromCartesian(_cartesian3);
      let _lat = Cesium.Math.toDegrees(_cartographic.latitude);
      let _lng = Cesium.Math.toDegrees(_cartographic.longitude);
      let _alt = _cartographic.height;
      return { lng: _lng, lat: _lat, alt: _alt };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" >
#home {
  height: calc(100vh - 60px);
  overflow: hidden;
  overflow-y: auto;
  background-color: white !important;
}
.box-card {
  position: fixed;
  top: 200px;
  right: 100px;
}
</style>
